<template>
    <imp-panel>
     <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>
                    部门管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    
        <div class="container"   v-loading="listLoading">
 
            <el-row slot="body" style="margin-bottom: 20px;" :gutter="24">
                <el-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" style="margin-bottom: 20px;">
                    <el-tree
                        class="filter-tree"
                        show-checkbox
                        :data="data2"
                        :props="defaultProps"
                        default-expand-all 
                        @check="handleNodeClick"                        
                        ref="tree2">
                    </el-tree>         
                </el-col>
       
            <el-col :span="18" :xs="24" :sm="24" :md="18" :lg="18">
                <el-card class="box-card">

                         <div class="handle-box"> 
                        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                        <el-form :inline="true"    class="demo-form-inline" >
                                <el-form-item label="部门ID">
                                    <el-input v-model="search.userid" style=""  placeholder="部门ID" size="mini"></el-input>
                                </el-form-item>
                                <el-form-item label="部门名称">
                                    <el-input v-model="search.username" placeholder="部门名称" size="mini"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary"   round icon="el-icon-search">搜索</el-button>                           
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </div>
                    <!--新增按钮-->
                    <template>                             
                        <div class="btn">
                                <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd" size="mini" round>新增</el-button>      
                                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteList" size="mini" round>删除</el-button>
                        </div>
                    </template>  
                </el-card>
            </el-col>     
                 </el-row>    
        </div>
        
        <adeptadd ref="dtptd"  v-bind:DeptTree='DeptTree'></adeptadd>
    </div>
    </imp-panel>
</template>
<script>
import adeptadd from './deptAdd';

export default {
    
    data(){
        return{
            DeptTree:[],
            // 列表数据
            tabbleDta:[],
            // 列表Loading加载
            listLoading: true,
            search:{},
            currentPage:0,
            pageSize:10,
            total:0 ,                 
            filterText: '',
            data2:[],
            defaultProps: {
                children: 'children',
                label: 'deptname'
            }
        }
    },
    mounted(){
    this.listLoading = true;
     //初始化加载数据
    this.getResult();
     this.gettree();
    },
    methods:{
        // 获取当前点击的树进行数据查询
        handleNodeClick(nodedata) {
            var _this = this;
           if(nodedata.deptid!=""||nodedata.deptid!=null){
                _this.$api.Deptgetid({'parentid':nodedata.deptid}).then((res)=>{
                _this.listLoading = false;
                if(res.result =='ok'){
                     _this.tabbleDta =res.data;
                }  
                }).catch((err)=>{
                    _this.$message({message:res.msg,type:'error'});
                });
           } 
      },
        gettree(){
            var _this = this;
            _this.$api.Depttree().then((res)=>{
                _this.listLoading = false;
               if(res.result =='ok'){
                    _this.data2 =res.data;
               }    
           }).catch((err)=>{
               _this.$message({
                   message:'数据获取失败',
                   type:'error'
               });
           });

         
        },
        getTableData(){
           // this.tabbleDta =this.tabbleDta.slice()
        },
        // 获取列表数据
        getResult(){
           // DeptAdd,DeptEdit,DeptList,DeptDelete
           var _this = this;
           _this.$api.DeptList().then((res)=>{
                _this.listLoading = false;
               if(res.result =='ok'){
                    _this.tabbleDta = res.data;
               }    
           }).catch((err)=>{
               _this.$message({
                   message:'数据获取失败',
                   type:'error'
               });
           });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 修改用户
        handleEdit(){

        },
        // 添加用户
        handleAdd(){
            
            var trid =this.$refs.tree2.getCheckedNodes()||"";
            if(trid ==""){
                this.$message({message:'请选择左边树,添加部门',type:'error'});
                return;
            }
              this.$refs['dtptd'].Visible =true; 
              this.DeptTree =  this.$refs.tree2.getCheckedNodes();
        },
        // 删除
        handleDeleteList(){

        }
    },components:{
       adeptadd
    }
}
</script>

<style scoped>
 
    .btn{
        margin-bottom: 1rem;
        
    }
 
    .el-tree{
        border: 1px solid #d1dbe5
    }
 
 
</style>
 